<!--
 * @Author: your name
 * @Date: 2021-07-24 11:19:33
 * @LastEditTime: 2021-07-24 12:46:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fd_-web\src\custom-component\Vcomponents\TimeModel.vue
-->
<template>
  <div class="time">
    <div class="date">
      <span>{{ Y }}/</span>
      <span>{{ M }}/</span>
      <span>{{ D }}</span>
    </div>
  </div>
</template>

<script>
import Dayjs from "dayjs";
export default {
  data() {
    return {
      Y: "",
      M: "",
      D: "",
      H: "",
      mm: "",
      ss: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    getTime() {
      let data = Dayjs().format("YYYY-MM-DD-HH-mm-ss");
      let formatdata = data.split("-");
      this.Y = formatdata[0];
      this.M = formatdata[1];
      this.D = formatdata[2];
      this.H = formatdata[3];
      this.mm = formatdata[4];
      this.ss = formatdata[5];
    },
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.timer_timemodel = setInterval(() => {
      this.getTime();
    }, 60000);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    clearInterval(this.timer_timemodel);
  },
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  letter-spacing: 2px;
  font-family: DSDIG;
  font-size: 100%;
  .date {
    text-align: center;
    width: 100%;
  }
  .timemon {
    text-align: center;
    width: 100%;
  }
}
</style>
